<template>
<keep-alive>
    <div id="gouwuc">
        <div class="tetiu-header">
            <div class="header"> <span class="iconfont">&#xe627;</span>搜索附近拼团商品</div>
            <ly-tab class="tabClolor" v-model="selectedId" :items="items" :options="options" @change="handleClick">
            </ly-tab>

            <button class="button1" @click="chenge1">切换</button>
        </div>
        <keep-alive>
            <component :is="type" :retiulist="retiulist"></component>
        </keep-alive>

    </div>
</keep-alive>
</template>

<script>
import retiu0001 from './components/retiu0001'
import retiu0003 from './components/retiu0003'
import retiu0004 from './components/retiu0004'
import xiaoxVue from '../xiaox/xiaox.vue'
import wodeVue from '../wode/wode.vue'
import axios from 'axios'
// import gouwuc0002 from './components/gouwuc0002'
// const gouwuc0002 = () =>import("../gouwuc/components/gouwuc0002")
const retiu0002 = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import('./components/retiu0002'),
    // 异步组件加载时使用的组件
    loading: xiaoxVue,
    // 加载失败时使用的组件
    error: wodeVue,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
})

export default {
    name: 'retiu',
    data() {
        return {
            index1: 0,
            options: {
                activeColor: '#1d98bd'
                // 可在这里指定labelKey为你数据里文字对应的字段
            },
            selectedId: 0,
            items: [],
            type1: this.$router.history.current.params.aid,
            type: 'retiu' + this.$router.history.current.params.aid,
            desc1: [{
                    id: "1",
                    sesc: "附近门店"
                },
                {
                    id: "2",
                    sesc: "为你推荐"
                },
                {
                    id: "3",
                    sesc: "排行榜"
                },
                {
                    id: "4",
                    sesc: "练习"
                },
            ],
            retiulist: [],
        }
    },
    components: {
        retiu0003,
        retiu0001,
        retiu0002,
        retiu0004,
    },
    created() {
        this.f()
    },
    mounted() {
        this.it()
        this.getDetailData()

    },
    methods: {
        it() {
            for (let i = 0; i < this.desc1.length; i++) {
                let item = {
                    label: this.desc1[i].sesc
                }
                this.items.push(item)
            }
            // console.log(this.items)
        },
        handleClick(item, index) {
            console.log(index)
            this.type = "retiu000" + (index + 1)
            console.log(this.type)
        },
        f() {
            if (this.type1 == null) {
                this.type = 'retiu0001'
            } else {
                console.log(this.type1)
                this.type = 'retiu' + this.$router.history.current.params.aid
            }
        },
        chenge1() {
            this.type = this.type == 'retiu0001' ? 'retiu0002' : 'retiu0001'

        },
        getDetailData() {
            axios.get("/api/treiulist.json")
                .then(this.getDetailDataSucc)
        },
        getDetailDataSucc(res) {
            console.log(res)
            res = res.data
            if (res.data) {
                const data = res.data
                this.retiulist = data.retiulist
            }
        },
    },
}
</script>

<style scoped>
#gouwuc {
    width: 100%;
    background-color: rgb(233, 233, 233);
}

.tetiu-header {
    width: 100%;
    position: fixed;
    left: 0px;
    height: 50px;
    z-index: 1;
    background-color: rgb(233, 233, 233);

}

.header {
    width: 70%;
    height: 25px;
    line-height: 25px;
    position: absolute;
    top: 10px;
    left: 5%;
    border-radius: 20px;
    padding-left: 50px;
    background-color: #fff;

}

.button1 {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 50px;
    height: 25px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    background-color: rgb(131, 130, 130);
}

.tabClolor {
    position: fixed;
    top: 50px;
    width: 100%;

    background-color: rgba(155, 155, 155, 0.822);

}

.iconfont {
    position: absolute;
    left: 25px;

}
</style>
